<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>日志圈</title>
    <%- include("link")%>
    <link rel="stylesheet" href="/css/space.css">
    <!-- 表情 -->
    <script src="/js/emoji_jQuery.min.js"></script>

</head>

<body>
    <div id="container">
        <%- include("nav")%>
        <div id="s-content">
            
            <div id="s-right">
                <div id="logtitle">
                    日志圈
                </div>
                <div id="log-box">


                </div>
                <div class="more">
                    <button id="loadmore">加载更多</button>
                </div>
            </div>
            <div id="s-left">
                <%if(iflogin){%>
                    <div class="s-userinfo">
                            <div class="suheader">
                               
        
                                <div class="h-title">用户信息</div>
                                <div class="infobox">
                                    <div class="sh-photo">
                                        <img src="/photo/<%=user.photo%>" alt="">
                                    </div>
                                    <div class="shinfo">
                                        <span>用户名：<i><%=user.userName%></i></span>
                                        <span>年龄：<i><%=user.age%></i></span> 
                                        <span>签名：<i><%=user.signature%></i></span>
                                        <span>发布<i><%=total%></i>条日志</span>     
                                    </div>
                                    
                                </div>
                            </div>
                            <div class="subottom">
                                <div class="b-title">发表日志</div>
                                <div id="div-emoji">
                                        <p>
                                            <textarea name="" id="input" cols="30" rows="10" placeholder="请输入文字"></textarea>
                                        </p>
                                        <p>
                                            <button id="send">发表</button>
                                            <button id="btn"></button>
                                        </p>
                                    </div>
                            </div>
                        </div>
                <%}else{%>
                    <div class="s-userinfo">
                            <div class="suheader">
                               
        
                                <div class="h-title">用户信息</div>
                                <div class="infobox">
                                    <div class="sh-photo">
                                        <img src="/photo/default.png" alt="">
                                    </div>
                                    <div class="shinfo">
                                        <span>用户名：<i>游客</i></span>
                                        <span>年龄：<i>年年18岁</i></span> 
                                        <span>签名：<i>什么都没有留下</i></span>
                                        <span>发布<i>0</i>条日志</span>     
                                    </div>
                                    
                                </div>
                            </div>
                            <div class="subottom">
                                <div class="b-title">发表日志</div>
                                <div id="div-emoji">
                                        <p>
                                            <textarea name="" id="input" cols="30" rows="10" placeholder="请先登录" disabled  style="background: white;cursor: not-allowed;"></textarea>
                                        </p>
                                        <p>
                                            <button id="send" disabled style="cursor: not-allowed;">发表</button>
                                            <button id="btn" disabled style="cursor: not-allowed;"></button>
                                        </p>
                                    </div>
                            </div>
                        </div>
                <%}%>
               
             </div>
        </div>
        <%- include("mask")%>
    </div>
</body>
<%- include('cluscript')%>
<script>

var page=1;
    getmore(page);
    

    $("#loadmore").click(function(){
        page++;
        getmore(page);
    })

    
    function getmore(index){
        $.ajax({
            url:"/log/logcircle",
            type:"post",
            success:function(msg){
                var str="";
                var limit=6;
                var count=Math.min(index*limit,msg.art.length);
                for(var i=0;i<count;i++){
                    str+=`
                    <div class="space-box clearfix">
                            <div class="s-photo">
                                <div>
                                    <img src="/photo/${msg.art[i].author.photo}" alt="">
                                </div>
                            </div>
                            <div class="s-chat">
                                <div class="chat-top">
                                        <span class="chat-user">${msg.art[i].author.userName}：</span>
                                        <span class="chat-info">
                                            ${msg.art[i].content}
                                        </span>
                                </div>
                                <div class="chat-middle">
                                    <span>${new Date(msg.art[i].date).toLocaleString('chinese', { hour12: false })}</span>
                                </div>
                                <div class="chat-bottom">
                                    <textarea name="" class="input" cols="30" rows="10" placeholder="我来评论" maxlength="100"></textarea>
                                    <button class="view">查看</button>
                                    <button class="send">评论</button>
                                </div>
                            </div>
                            <div class="clear"></div>
                    </div>
                    `
                }
                $("#log-box").html(str);
            }
        })
    }



    // 表情
    $.Lemoji({
        emojiInput: '#input',
        emojiBtn: '#btn',
        position: 'LEFTBOTTOM',
        length: 8,
        emojis: {
            qq: {path: '/static/images/qq/', code: ':', name: 'QQ表情'},
            tieba: {path: '/static/images/tieba', code: ';', name: "贴吧表情"},
            emoji: {path: '/static/images/emoji', code: ',', name: 'Emoji表情'}
        }
    });
            
    // 表情解析
    $('#send').click(function () {
        var content = $('#input').val();
        content = $.emojiParse({
            content: content,
            emojis: [
                {
                    type: 'qq', path: '/static/images/qq/', code: ':'
                }, 
                {
                    path: '/static/images/tieba/',
                    code: ';',
                    type: 'tieba'
                }, 
                {
                    path: '/static/images/emoji/', code: ',', type: 'emoji'
                }
            ]
        });
        // $('#test').html(content);
        $.ajax({
            url:"/log/published",
            method:"post",
            data:{
                content,
                date:new Date()
            },
            success:function(msg){
                if(msg.code==1){
                    layer.msg(
                        msg.message,
                        {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        },
                        function () {
                            $("#input").val("");
                            window.location.reload();
                        }
                    );
                }else{
                    layer.msg(
                        msg.message,
                        {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        },
                        function () {
                            
                        }
                    );
                }
            }
        })
    });

   

</script>
</html>